<template>
  <div>
    <CategorySelector :disabled="!isShowAttr" />
    <AttrList
      v-if="isShowAttr"
      @setIsShowAttrList="isShowAttr = $event"
      @setAttr="attr = $event"
    ></AttrList>
    <SaveUpdateAttr v-else @setIsShowAttrList="isShowAttr = $event" :attr="attr" />
  </div>
</template>

<script lang="ts">
export default {
  name: "XAttr",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import AttrList from "./components/AttrList.vue";
import SaveUpdateAttr from "./components/SaveUpdateAttr.vue";
import type { SaveAttrItem } from "@/api/product/model/attrListModel";

const attr = ref<SaveAttrItem>({
  attrName: "",
  attrValueList: [],
});
const isShowAttr = ref(true);
</script>

<style scoped></style>
